const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}

// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/'
  : '/'

const apiHost = 'http://localhost:8082'

module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  publicPath: BASE_URL,

  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  // lintOnSave: false,

  chainWebpack: config => {

    // key,value自行定义，比如.set('@@', resolve('src/components'))
    // 为什么要分这么多层？
    // （用户交互、视觉效果、数据处理）前台三大块分开，让写页面和个性化组装一样。
    // 同样的业务逻辑只需要修改对应的元素内容就可以了
    // 例如增删改查这些操作，
    // 前后台的数据处理逻辑是一致的，数据的展示效果也是一致的，
    // 唯一是要展示的元素不同，那么页面只需要将 不同的展示接口 使用管道连接到 逻辑处理组件接口 上就好了
    // 页面的布局规律 
    // <#>
    //   <%>
    //     <##>
    //       <%%>
    //         <@@/>
    //       </%%>
    //     </##>
    //   </%>
    // </#> 
    config.resolve.alias

      // 基础的不好分配层面的
      .set('@' , resolve('src'            )) // 源文件
      .set('@@', resolve('src/components' )) // 组件包 // 通用
      .set('$' , resolve('src/api'        )) // api
      .set('$$', resolve('src/store'      )) // 数据仓库/配置仓库/静态数据

      // 结构层（主要是页面布局）
      // 一般都是抽出来放到一个统一的文件夹内
      .set('#' , resolve('src/frames'    )) 
      
      // 结构中间层（主要是组件布局与数据交互的地方）
      // 这一层是和业务相关的，根据自己的需求修订
      // 一般都是抽出来放到一个统一的文件夹内
      // 特殊的在相对应的页面文件夹内的 ./structs 文件夹下
      .set('##', resolve('src/middle'     )) 

      // 视图层（主要是页面中模块/组件的排布）
      // 一般在每个对应的页面文件夹内
      .set('%' , resolve('src/views'      )) 

      // 视图元素层（主要是组件元素与用户交互的地方）
      // 这一层是和业务相关的，根据自己的需求修订，
      // 一般在相对应的页面文件夹内的 ./components 文件夹下
      // 特殊的抽出来放到一个统一的文件夹内
      .set('%%', resolve('src/element'    ))
      
  },
  // 这里写你调用接口的基础路径，来解决跨域，
  // 如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    proxy: {
      '/api': {
        target: apiHost,
        pathRewrite: { '^/api': '' }
      },
      '/file': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/file': '' }
      }
    }
  },
  // 打包时不生成.map文件
  productionSourceMap: false,
  // 输出文件夹默认是 dist
  outputDir: undefined,
  assetsDir: undefined,
  runtimeCompiler: true,
  parallel: undefined,
  css: undefined
}
